<template>
	<view class="order" :style="{ paddingTop: StatusBar + 'px' }">
		<view class="order_header">
			<view class="header_back" @click="navigateBack()">
				<text class="iconfont icon-Left"></text>
			</view>
			<view class="header_title">确认订单</view>
		</view>
		<view class="order_body">
			<view class="body_message">
				<view class="message_image">
					<image :src="details_data['img']" mode=""></image>
				</view>
				<view class="message_content">
					<view class="content_title">{{details_data.title}}</view>
					<view class="content_system">
						<view class="system_item">{{details_data.game_name}}</view>
						<view class="system_icon"></view>
						<view class="system_item">{{details_data.system_name}}</view>
					</view>
				</view>
			</view>
			<view class="body_guarantee">
				<u-radio-group  v-model="value" @change="radioGroupChange" active-color="red">
					<view class="guarantee_list">
						<view class="list_item" v-for="item in details_data.insure" :key="item.id">
							<view class="item_message">
								<view class="message_head">
									<text class="head_title">{{item.name}}</text>
									<text class="head_icon">费用{{item.money}}元</text>
								</view>
								<view class="message_tips">购买此项可享受{{item.name}}服务</view>
							</view>
							<view class="item_btn">
								<u-radio :name="`${item.id}`"></u-radio>
							</view>
						</view>
						<view class="list_item" >
							<view class="item_message">
								<view class="message_head">
									<text class="head_title">无需包赔</text>
									<text class="head_icon">费用0元</text>
								</view>
								<view class="message_tips">为了避免您的损失,建议购买包赔</view>
							</view>
							<view class="item_btn">
								<u-radio name="0"></u-radio>
							</view>
						</view>
					</view>
				</u-radio-group>
				<view class="guarantee_preferential" v-if="false">
					<view class="preferential_title">优惠券</view>
					<view class="preferential_right">
						<view class="right_text">暂无可用</view>
						<view class="iconfont icon-Right"></view>
					</view>
				</view>
			</view>
			<view class="body_pay">
				<u-radio-group  v-model="pay_id" @change="radioGroupChange" active-color="red">
					<view class="pay_list">
						<view class="list_item" v-for="item in pay_list" :key="item.id">
							<view class="item_icon">
								<text class="iconfont" :class="item.img"></text>
							</view>
							<view class="item_text">{{item.name}}</view>
							<view class="item_btn">
								<u-radio :name="`${item.id}`"></u-radio>
							</view>
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="order_bottom">
			<view class="bottom_btn">
				<view class="btn_message">
					<text class="message_tips">合计</text>
					<view class="message_right">
						<text>￥</text>
						<text>{{details_data.price}}</text>
					</view>
				</view>
				<view class="btn_confirm" @click="order_pay(details_data.id)">立即购买</view>
				<!-- <view class="btn_confirm" @click="navigateTo('serve')">联系客服</view> -->
			</view>
		</view>
		<u-loading-page bg-color="#FCFCFF" image="../../static/logo.gif"  icon-size="140"  loading-text="正在创建订单中..."  fontSize="26rpx"  :loading="loading"></u-loading-page>
		<u-popup style="z-index: 1;" :show="wx_show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="order_weixin">
				<view class="weixin_tips">
					请打开微信扫码完成支付
				</view>
			   <view class="weixin_img">
					<image :src="code_img" mode=""></image>
			   </view>
			   <u-button type="error" :plain="true" text="取消支付" @click="navigateBack()"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import QRCode from 'qrcode'
import {goods_pay, order_pay} from "@/api/details"
export default {
	data() {
		return {
			wx_show: false,
			pay_list:[
				{id: 1, name: "微信支付", img: "icon-weixin"},
				{id: 2, name: "支付宝支付", img: "icon-zhifubaozhifu"},
			],
			no_price:null,
			value: null,
			pay_id: "2",
			StatusBar: this.StatusBar,
			textList: [],
			details_data: {},
			flag: false,
			loading:false,
			code_img:''
		};
	},
	onLoad(option) {
		if ('id' in option) {
			this.goods_pay(option.id)
		}
	},
	onShow(){
		if (this.flag) {
			uni.showModal({
				content: '您是否已经支付了订单？',
				cancelText: "返回", // 取消按钮的文字  
				confirmText: "我已支付", // 确认按钮文字
				success: (res) => {
					if (res.confirm) {
						this.navigateTo('buy_order')
					} else if (res.cancel) {
						this.navigateBack(1)
					}
				  
				}
			  });
		}
	},
	methods: {
		close(){},
		open(){},
		confirm(){
			
		},
		async goods_pay(id){
			let data = await goods_pay({id})
			if (data) {
				this.details_data = data.data
				this.value = String(data.data.insure[0].id) || "0"
				this.no_price = this.details_data.price
				this.details_data.price = data.data.insure[0].all_money || this.details_data.price
			}
			
		},
		async order_pay(id){
			this.loading = true
			let data = await order_pay({id:id, insure_id: this.value, pay_id: this.pay_id})
			this.loading = false
			if (data) {
				let url = data.data.gateway_url
				if(this.pay_id==1) {
					this.code_img = await QRCode.toDataURL(url);
					this.wx_show = true
				}else {
					let target = navigator.userAgent.toLowerCase();
					let isWeixin = /micromessenger/.test(target);
					if (isWeixin) {
						location.href = url
					}else {
						location.href = `alipays://platformapi/startapp?saId=10000007&qrcode=${url}?_s=web-other`
					}
					
				}
				this.flag = true
			}else {
				
				this.flag = false
			}
			
		},
		radioGroupChange(v){
			if (v == 0) {
				this.details_data.price = this.no_price
			}else  {
				this.details_data.insure.forEach(item=> {
					if(v == item.id) {
						this.details_data.price = item.all_money
					}
				})
			}
			
		}
	}
};
</script>

<style>
page {
	background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.order {
	background-image: url(@/static/confirm_order/nav.png);
	background-repeat: no-repeat;
	background-size: 100%;
	overflow: hidden;
	.order_header {
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		position: relative;
		.header_back {
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
		}
		.header_title {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-weight: bold;
		}
		.header_btn {
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #22150b;
			.iconfont {
				font-size: 40rpx;
			}
			.btn_text {
				margin-top: 4rpx;
				font-size: 24rpx;
			}
		}
	}
	.order_body {
		padding: 32rpx;
		box-sizing: border-box;
		.body_message {
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			box-sizing: border-box;
			padding: 24rpx;
			.message_image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.message_content {
				margin-left: 16rpx;
				flex: 1;
				.content_title {
					font-size: 24rpx;
					color: #22150B;
					line-height: 28rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.content_system {
					display: flex;
					margin-top: 24rpx;
					align-items: center;
					.system_item {
						font-size: 20rpx;
						color: #6C6C6C;
						
					}
					.system_icon {
						width: 2rpx;
						height: 16rpx;
						background: #E5E5E5;
						margin: 0 16rpx;
					}
				}
			}
		}
		
		.body_guarantee {
			margin-top: 16rpx;
			box-sizing: border-box;
			padding: 0 24rpx;
			border: 2rpx solid #F3F3F3;
			background: #fff;
			border-radius: 20rpx;
			.guarantee_list {
				width: 100%;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F3F3F3;
				.list_item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					width: 100%;
					.item_message {
						.message_head {
							display: flex;
							align-items: center;
							.head_title {
								font-size: 28rpx;
								font-weight: bold;
								color: #22150B;
							}
							.head_icon {
								background: #FFEBEB;
								border-radius: 40rpx;
								box-sizing: border-box;
								padding: 10rpx 18rpx;
								margin-left: 24rpx;
								font-size: 20rpx;
								line-height: 20rpx;
								color: #FF3E3E;
							}
						}
						.message_tips {
							font-size: 24rpx;
							color: #6C6C6C;
							margin-top: 8rpx;
						}
					}
					.item_btn {
						margin-left: auto;
					}
				}
			}
			.guarantee_preferential {
				padding: 40rpx 0;
				display: flex;
				align-items: center;
				.preferential_title {
					font-size: 28rpx;
					color: #22150B;
					font-weight: bold;
				}
				.preferential_right {
					margin-left: auto;
					display: flex;
					align-items: center;
					.right_text {
						font-size: 24rpx;
						color: #B0B0B0;
						line-height: 24rpx;
					}
					.iconfont {
						font-size: 20rpx;
						color: #B0B0B0;
						margin-left: 10rpx;
					}
				}
			}
		}
		
		.body_pay {
			margin-top: 16rpx;
			background: #fff;
			border: 2rpx solid #F3F3F3;
			border-radius: 20rpx;
			.pay_list {
				width: 100%;
				border-bottom: 2rpx solid #F3F3F3;
				box-sizing: border-box;
				padding: 0 24rpx;
				.list_item {
					display: flex;
					align-items: center;
					padding: 25rpx 0;
					width: 100%;
					.item_icon {
						.icon-weixin {
							color: #07c160;
						}
						.icon-zhifubaozhifu {
							color: #1677ff;
						}
					}
					.item_text {
						margin-left: 28rpx;
						font-size: 28rpx;
						color: #22150B;
						font-weight: bold;
					}
					.item_btn {
						margin-left: auto;
					}
				}
			}
		}
	}
	.order_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 172rpx;
		box-sizing: border-box;
		padding: 0 32rpx;
		background: #FFFFFF;
		box-shadow: -8rpx 0rpx 8rpx 0rpx rgba(236,225,214,0.34);
		.bottom_btn {
			margin-top: 20rpx;
			height: 100rpx;
			background: #212121;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			.btn_message {
				display: flex;
				align-items: center;
				margin-left: 40rpx;
				.message_tips {
					font-size: 28rpx;
					color: #fff;
				}
				.message_right {
					display: flex;
					margin-left: 12rpx;
					text {
						&:nth-child(1){
							font-size: 24rpx;
							line-height: 24rpx;
							color: #fff;
							font-weight: bold;
						}
						&:nth-child(2){
							font-size: 36rpx;
							line-height: 36rpx;
							color: #fff;
							font-weight: bold;
						}
					}
					
					align-items: flex-end;
				}
			}
			
			.btn_confirm {
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #22150B;
				background: #FDD637;
				border-radius: 0rpx 100rpx 100rpx 0rpx;
				width: 284rpx;
				height: 100%;
			}
		}
	}
	box-sizing: border-box;
	padding-bottom: 180rpx;
}
.order_weixin {
	box-sizing: border-box;
	padding: 40rpx;
	.weixin_tips {
		font-size: 28rpx;
		text-align: center;
	}
	.weixin_img {
		margin: 0 auto;
		width: 400rpx;
		height: 400rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
/deep/.u-fade-enter-active {
  z-index: 1 !important;
}
/deep/.u-slide-up-enter-active {
  z-index: 1 !important;
}
</style>
